<template>
  <div class="components-container">
    <split-pane split="vertical" @resize="resize">
      <template slot="paneL">
        <div class="left-container"></div>
      </template>
      <template slot="paneR">
        <split-pane split="horizontal">
          <template slot="paneL">
            <div class="top-container"></div>
          </template>
          <template slot="paneR">
            <div class="bottom-container"></div>
          </template>
        </split-pane>
      </template>
    </split-pane>
  </div>
</template>

<style lang="less">
  @import "./index.less";
</style>

<script>
import splitPane from 'vue-splitpane'

export default {
  name: 'sysmenu',
  components: { splitPane },
  methods: {
    resize() {
      console.log('resize')
    }
  }
}
</script>
